<!-- page header -->
<div class="pageheader">


    <h2><i class="fa fa-puzzle-piece" style="line-height: 48px;padding-left: 5px;"></i> Tables <span>// Place subtitle here...</span></h2>


    <div class="breadcrumbs">
        <ol class="breadcrumb">
            <li>You are here</li>
            <li><a href="index.html">Minimal</a></li>
            <li><a href="tables.html">Tables</a></li>
            <li class="active">Bootstrap Tables</li>
        </ol>
    </div>


</div>
<!-- /page header -->






<!-- content main container -->
<div class="main">




    <!-- row -->
    <div class="row">

        <!-- col 6 -->
        <div class="col-md-6">



            <!-- tile -->
            <section class="tile color transparent-black">



                <!-- tile header -->
                <div class="tile-header">
                    <h1><strong>Advanced</strong> Table</h1>
                    <div class="search">
                        <input type="text" placeholder="Search...">
                    </div>
                    <div class="controls">
                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <!-- /tile header -->

                <!-- tile widget -->
                <div class="tile-widget bg-transparent-black-2">
                    <div class="row">

                        <div class="col-sm-4 col-xs-6">
                            <div class="input-group table-options">
                                <select class="chosen-select form-control">
                                    <option>Bulk Action</option>
                                    <option>Delete Selected</option>
                                    <option>Copy Selected</option>
                                    <option>Archive Selected</option>
                                </select>
                          <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Apply</button>
                          </span>
                            </div>
                        </div>

                        <div class="col-sm-8 col-xs-6 text-right">

                            <div class="btn-group btn-group-xs table-options">
                                <button type="button" class="btn btn-default">Day</button>
                                <button type="button" class="btn btn-default">Week</button>
                                <button type="button" class="btn btn-default">Month</button>
                            </div>

                        </div>


                    </div>
                </div>
                <!-- /tile widget -->



                <!-- tile body -->
                <div class="tile-body nopadding">

                    <table class="table table-bordered table-sortable">
                        <thead>
                        <tr>
                            <th>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="allchck">
                                    <label for="allchck"></label>
                                </div>
                            </th>
                            <th class="sortable sort-alpha sort-asc">First Name</th>
                            <th class="sortable sort-alpha">Last Name</th>
                            <th class="sortable sort-alpha">Username</th>
                            <th style="width: 30px;"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="chck01">
                                    <label for="chck01"></label>
                                </div>
                            </td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td><a href="#" class="check-toggler checked"></a></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="chck02">
                                    <label for="chck02"></label>
                                </div>
                            </td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td><a href="#" class="check-toggler"></a></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="chck03">
                                    <label for="chck03"></label>
                                </div>
                            </td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                            <td><a href="#" class="check-toggler checked"></a></td>
                        </tr>
                        </tbody>
                    </table>

                </div>
                <!-- /tile body -->


                <!-- tile footer -->
                <div class="tile-footer bg-transparent-black-2 rounded-bottom-corners">
                    <div class="row">

                        <div class="col-sm-4">
                            <div class="input-group table-options">
                                <select class="chosen-select form-control">
                                    <option>Bulk Action</option>
                                    <option>Delete Selected</option>
                                    <option>Copy Selected</option>
                                    <option>Archive Selected</option>
                                </select>
                          <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Apply</button>
                          </span>
                            </div>
                        </div>

                        <div class="col-sm-4 text-center">
                            <small class="inline table-options paging-info">showing 1-3 of 24 items</small>
                        </div>

                        <div class="col-sm-4 text-right sm-center">
                            <ul class="pagination pagination-xs nomargin pagination-custom">
                                <li class="disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <!-- /tile footer -->




            </section>
            <!-- /tile -->


        </div>
        <!-- /col 12 -->



    </div>
    <!-- /row -->



</div>
<!-- /content container -->